<template>
    <box width="460px"
         height="680px"
         left="59px"
         top="291px"
         title="评价概况">
        <div class="list flex"
             v-if="info.total">
            <div class="item flex">
                <img src="../../../assets/img/comment/leftbottom-icon-1.png"
                     class="icon"
                     alt="">
                <div>
                    <p class="val">
                        {{  info.total.val
                            }}<span class="unit">{{info.total.unit}}</span>
                    </p>
                    <div class="flex">
                        <label for="">{{info.total.name}}</label>
                    </div>
                </div>
            </div>
            <div class="item flex">
                <img src="../../../assets/img/comment/leftbottom-icon-2.png"
                     class="icon"
                     alt="">
                <div>
                    <p class="val">
                        {{ info.month.val
                            }}<span class="unit">{{info.month.unit}}</span>
                    </p>
                    <div class="flex">
                        <label for="">{{info.month.name}}</label>
                    </div>
                </div>
            </div>
            <div class="item flex">
                <img src="../../../assets/img/comment/leftbottom-icon-3.png"
                     class="icon"
                     alt="">
                <div>
                    <p class="val">
                        {{ info.badPercent.val
                            }}<span class="unit">{{info.badPercent.unit}}</span>
                    </p>
                    <div class="flex">
                        <label for="">{{info.badPercent.name}}</label>
                    </div>
                </div>
            </div>
            <div class="item flex">
                <img src="../../../assets/img/comment/leftbottom-icon-4.png"
                     class="icon"
                     alt="">
                <div>
                    <p class="val">
                        {{ info.overCount.val
                            }}<span class="unit">{{info.overCount.unit}}</span>
                    </p>
                    <div class="flex">
                        <label for="">{{info.overCount.name}}</label>
                    </div>
                </div>
            </div>
        </div>
        <my-title top="316px"
                  title="近7日差评量趋势图"></my-title>
        <div class="chart"
             ref="chart"></div>
    </box>
</template>

<script>
export default {
    props: {
        info: {
            default: () => ({
                total: {
                    val: '',
                    unit: '',
                    name: '',
                },
                month: {
                    val: '',
                    unit: '',
                    name: '',
                },
                badPercent: {
                    val: '',
                    unit: '',
                    name: '',
                },
                overCount: {
                    val: '',
                    unit: '',
                    name: '',
                },
            }),
        },
    },
    components: {},
    data() {
        return {}
    },
    watch: {
        info: {
            handler(newVal) {
                this.$nextTick(() => {
                    this.lineChartInit(newVal.chartData)
                })
            },
            deep: true,
        },
    },
    methods: {
        lineChartInit(data) {
            let _chart = this.$echarts.init(this.$refs['chart'])
            let _options = {
                grid: {
                    top: '30',
                    right: '20',
                    left: '50',
                    bottom: '30', //图表尺寸大小
                },
                tooltip: {},
                xAxis: {
                    type: 'category',

                    boundaryGap: false,
                    color: '#59588D',
                    data: data.map((item) => item.name),
                    axisLabel: {
                        margin: 8,
                        color: '#8fadcc',
                        textStyle: {
                            fontSize: 14,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.3)',
                        },
                    },
                    axisTick: {
                        show: true,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                yAxis: [
                    {
                        axisLabel: {
                            color: '#8fadcc',
                            textStyle: {
                                fontSize: 12,
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.3)',
                            },
                        },
                        axisTick: {
                            show: true,
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: '日差评量',
                        type: 'line',
                        label: {
                            show: true,
                            position: 'top',
                            color: '#fff',
                        },
                        itemStyle: {
                            normal: {
                                color: '#19b4ff',
                                lineStyle: {
                                    color: '#19b4ff',
                                    width: 2,
                                },
                                areaStyle: {
                                    color: new this.$echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(58,132,255,0)',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(58,132,255,0.35)',
                                            },
                                        ]
                                    ),
                                },
                            },
                        },
                        data: data.map((item) => item.val),
                    },
                ],
            }
            _chart.setOption(_options)
        },
    },
    created() {},
    mounted() {},
}
</script>
<style lang='less' scoped>
.list {
    width: 416px;
    margin: 30px 22px;
    .item {
        width: 208px;
        height: 70px;
        margin-bottom: 40px;
        .icon {
            margin-right: 16px;
        }
        .val {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
            .unit {
                font-size: 12px;
                color: #8fadcc;
                margin-left: 4px;
            }
        }
        &:nth-of-type(1) {
            .val {
                color: #33bbff;
            }
        }
        &:nth-of-type(2) {
            .val {
                color: #ff5959;
            }
        }
        &:nth-of-type(3) {
            .val {
                color: #ff9500;
            }
        }
        &:nth-of-type(4) {
            .val {
                color: #cc66ff;
            }
        }
        label {
            font-size: 14px;
        }
    }
}
.chart {
    width: 460px;
    height: 325px;

    position: absolute;
    left: 0;
    bottom: 0;
}
</style>
